<html>
<head>
    <script src="../libraries/RGraph.common.core.js" ></script>
    <script src="../libraries/RGraph.common.key.js" ></script>
    <script src="../libraries/RGraph.bar.js" ></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->
    
    <title>A bar chart with a HTML key</title>
    
    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
    
    <meta name="description" content="An example of a Bar chart that's using a HTML key" />

    <script>
        $(document).ready(function ()
        {
            var year1 = [4,5,8,6,7,8,4,6,5,3,2,1];
            var year2 = [1,2,6,8,4,9,5,6,3,5,4,4];
            var data  = [];
            
            // Combine the data
            for (var i=0; i<12; i+=1) {
                data.push([year1[i], year2[i]]);
            }
            
            // Draw the key first
            RGraph.HTML.Key('container', {
                labels: ['First year','Second year'],
                colors: ['red','#0c0'],
                tableCss: {
                           'top': '25px',
                           'left': '600px',
                           'position': 'absolute'
                          }
            });
    
            // Now draw the chart (AFTER the key)
            var bar = new RGraph.Bar({
                id: 'cvs',
                data: data,
                options: {
                    colors: ['red','0c0'],
                    grouping: 'stacked',
                    labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
                    strokestyle: 'rgba(0,0,0,0)'
                }
            }).draw();
        })
    </script>
</head>
<body>
    
    <h1>An example of a Bar chart that's using a HTML key</h1>
    
    <p>
        Instead of using a key that's drawn onto the canvas this shows you an example of using the HTML
        based key that was added to RGraph in December 2013. To use it effectively it will help if you first understand
        CSS positioning - both relative and absolute.
    </p>

    
    
    
    
    <!-- This is the HTML needed for the HTML key - the key is appended to the DIV, after the canvas -->
    <div id="container" style="position: relative">
        <canvas id="cvs" width="600" height="200"></canvas>
    </div>

    
    
    
    
    
    


    <p>
        <a href="./">&laquo; Back</a>
    </p>

</body>
</html>